<template>
  <transition-group name="message-fade" tag="div" class="message-container">
    <div v-for="msg in messages" :key="msg.id" :class="['message', msg.type]" @mouseenter="pause(msg)"
      @mouseleave="resume(msg)">
      {{ msg.content }}
    </div>
  </transition-group>
</template>

<script setup>
import { defineProps } from "vue";
import { startTimer } from "./Message.js";

const props = defineProps({
  messages: {
    type: Array,
    required: true,
  },
});

function pause(msg) {
  if (msg.timeoutId) {
    clearTimeout(msg.timeoutId);
    msg.timeoutId = null;
  }
}

function resume(msg) {
  startTimer(msg, 2000); // 鼠标移出后2秒消失
}
</script>

<style scoped>
.message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.message {
  display: inline-block;
  padding: 6px 14px;
  margin-top: 10px;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  max-width: 400px;
  word-break: break-word;
}

.message.success {
  background-color: #62da26;
}

.message.warn {
  background-color: #faad14;
}

.message.error {
  background-color: #f5222d;
}

.message.info {
  background-color: white;
  color: black;
}

.message-fade-enter-active,
.message-fade-leave-active {
  transition: all 0.3s ease;
}

.message-fade-enter-from,
.message-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
</style>
